<template>
  <div class="header">
    <div class="blank">
      <span v-if="back" @click="goBack">
        <van-icon name="arrow-left" style="margin-bottom:4px" />返回
      </span>
    </div>
    <!-- <div class="add" v-if="application" >
      <van-icon name="add-o" @click="showAddCompany" v-if="express" />
      <van-icon name="add-o" @click="addItem" />
    </div> -->
    <div class="name">{{companyName}}</div>
    <div class="toggle" @click="toggleCompany">
      <van-icon name="exchange" /> 切换
    </div>

    <!-- 图标位置 -->
    <van-popup v-model="show" closeable close-icon="close" position="bottom">
      <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" description="切换公司" :style="{ height: '50%' }" close-on-click-action @select="onSelect" />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ["application", "express", "back"],
  data() {
    return {
      show: false,
      companyName: "合肥崇武商贸有限公司",
      actions: [
        { name: "合肥崇武商贸有限公司" },
        { name: "合肥新辉商贸有限公司" },
        { name: "合肥久益商贸有限公司" },
        { name: "合肥展宇贸易有限公司" },
        { name: "合肥吉曜贸易有限公司" },
        { name: "合肥昶岳贸易有限公司" },
        { name: "合肥马可波罗贸易有限公司" },
        { name: "合肥探险者贸易公司" },
        { name: "合肥大山商贸有限公司" },
        { name: "合肥郎思达电子科技有限公司" },
        // { name: "选项三", subname: "描述信息" },
      ],
    };
  },
  created() {
    if (sessionStorage.getItem("company")) {
      this.companyName = sessionStorage.getItem("company");
    } else {
      this.companyName = "合肥崇武商贸有限公司";
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    showAddCompany() {
      this.$toast("公司");
    },
    addItem() {
      this.$router.push("/fillBill");
    },
    toggleCompany() {
      this.show = true;
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.companyName = item.name;
      sessionStorage.setItem("company", item.name);
      setTimeout(() => {
        this.$toast("切换成功");
      }, 800);
    },
  },
};
</script>

<style scoped lang="less">
.header {
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  background-color: #07c160;
  display: flex;
  .blank {
    flex: 1.5;
  }
  .add{
    flex: 1.5;
  }
  .name {
    flex: 8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .toggle {
    flex: 2;

    img {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}
</style>